<template>
  <div class="start">
    <mu-card>
        <mu-chip class="chip">
          <mu-avatar :size="32" :src="IconAvatar"/>{{ msg.title}}</mu-chip>
          <div id="id_message">{{ msg.content }}</div>
    </mu-card>
  </div>
</template>

<script>
import iconAvatar from '@/assets/img/uicon.jpg';

export default {
  name: 'start',
  data() {
    return {
      IconAvatar: iconAvatar,
    };
  },
  props: ['msg'],
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mu-card{
  margin:0.5rem;
  padding-bottom:0.5rem;
  text-align:left;
}

.mu-chip{
  margin-top:0.5rem;
  margin-left:0.1rem;
}
#id_message{
   margin:0.4rem;
}
</style>
